<template>
  <div v-for="(value, k) in propsForms" :key="k" class="edit-wrapper-layout">
    <template v-if="value">
      <span class="edit-item-layout">{{ value.label }}</span>
      <component
        :is="value.component"
        :style="value.componentStyle"
        v-bind="{ ...value.extraProps, [value.valueAlias]: value.value }"
        v-on="value.events"
      >
        <template v-if="value.subComponent && value.subComponentProps">
          <template v-for="subValue in value.subComponentProps.options" :key="subValue.value">
            <component :is="value.subComponent" :value="subValue.value">
              {{ subValue.label }}
              <!-- <RenderComponent :vnode="subValue.label" /> -->
            </component>
          </template>
        </template>
      </component>
    </template>
  </div>
</template>

<script lang="ts">
export default { name: 'CurrentCustomComponentInfo' };
</script>
<script setup lang="ts">
import { PropType, computed } from 'vue';
// import RenderComponent from '../../../components/RenderComponent';
import { editorCompnoent } from '../../../store/defaultLabelComponentList';
import { TextCompnoentProps, IComponentInfo } from '../../../store/storeTypes';

const props = defineProps({
  componentInfo: {
    type: Object as PropType<TextCompnoentProps>,
    required: true
  }
});
const emit = defineEmits(['update-view']);

interface FormPropsType extends Required<Omit<IComponentInfo, 'before' | 'after'>> {
  value: string;
  events: { [key: string]: (e: Event) => void };
}

const propsForms = computed(() => {
  /* { text: { component: 'el-input', value: 'content' } } */
  return Object.keys(props.componentInfo).reduce((p, key) => {
    const newKey = key as keyof TextCompnoentProps;
    const item = editorCompnoent[newKey];
    if (item) {
      const _value = props.componentInfo[newKey];
      const { before, after, eventName = 'change', valueAlias = 'value' } = item;
      const newItem = {
        ...item,
        valueAlias,
        value: before ? before(_value as string) : _value,
        events: {
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          [eventName](e: any) {
            emit('update-view', {
              key: newKey,
              value: after ? after(e) : e
            });
          }
        }
      };
      p[newKey as string] = newItem;
    }
    return p;
  }, {} as { [key in keyof TextCompnoentProps]: FormPropsType });
});
</script>

<style scoped>
.edit-wrapper-layout {
  display: flex;
  align-items: center;
  height: 46px;
}
.edit-item-layout {
  display: inline-block;
  width: 80px;
  padding-right: 16px;
  text-align-last: justify;
  box-sizing: border-box;
}
</style>
